<template>
    <div>
        <el-row>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="等级名称">
                    <el-input v-model="formInline.name" placeholder="请输入等级名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEdit">添加</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="等级名称">
                </el-table-column>
                <el-table-column
                        prop="growthPoint"
                        label="成长值">
                </el-table-column>
                <el-table-column
                        prop="ratio"
                        label="积分增减比">
                </el-table-column>
                <el-table-column prop="defaultStatus" label="默认等级">
                    <template slot-scope="scope">{{ scope.row.defaultStatus ===0 ?'不是':'是'}}</template>
                </el-table-column>
                <el-table-column
                        prop="freeFreightPoint"
                        label="免运费标准">
                </el-table-column>
                <el-table-column prop="priviledgeComment" label="有评论获奖特权">
                    <template slot-scope="scope">
                        <span v-if="scope.row.priviledgeComment === 0"><el-button size="mini" type="info">无</el-button></span>
                        <span v-if="scope.row.priviledgeComment === 1"><el-button size="mini" type="primary">有</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column prop="priviledgeMemberPrice" label="会员价格特权">
                    <template slot-scope="scope">
                        <span v-if="scope.row.priviledgeMemberPrice === 0"><el-button size="mini" type="info">无</el-button></span>
                        <span v-if="scope.row.priviledgeMemberPrice === 1"><el-button size="mini" type="primary">有</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column prop="priviledgePromotion" label="专享活动特权">
                    <template slot-scope="scope">
                        <span v-if="scope.row.priviledgePromotion === 0"><el-button size="mini" type="info">无</el-button></span>
                        <span v-if="scope.row.priviledgePromotion === 1"><el-button size="mini" type="primary">有</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column prop="priviledgeBirthday" label="生日特权">
                    <template slot-scope="scope">
                        <span v-if="scope.row.priviledgeBirthday === 0"><el-button size="mini" type="info">无</el-button></span>
                        <span v-if="scope.row.priviledgeBirthday === 1"><el-button size="mini" type="primary">有</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="note"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <el-dialog title="会员等级管理" :visible.sync="dialogVisible" width="30%" :showClose="false">
            <div>
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-input v-model="form.id" style="display: none"></el-input>
                    <el-form-item label="等级名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="成长值" prop="growthPoint">
                        <el-input v-model="form.growthPoint"></el-input>
                    </el-form-item>
                    <el-form-item label="积分增减比" prop="ratio">
                        <el-input v-model="form.ratio"></el-input>
                    </el-form-item>
                    <el-form-item label="默认等级">
                        <el-radio-group v-model="form.defaultStatus">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="免运费标准" prop="freeFreightPoint">
                        <el-input v-model="form.freeFreightPoint"></el-input>
                    </el-form-item>
                    <el-form-item label="评论获奖特权" prop="priviledgeComment">
                        <el-radio-group v-model="form.priviledgeComment">
                            <el-radio :label="1">有</el-radio>
                            <el-radio :label="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="专享活动特权" prop="priviledgePromotion">
                        <el-radio-group v-model="form.priviledgePromotion">
                            <el-radio :label="1">有</el-radio>
                            <el-radio :label="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="会员价格特权" prop="priviledgeMemberPrice">
                        <el-radio-group v-model="form.priviledgeMemberPrice">
                            <el-radio :label="1">有</el-radio>
                            <el-radio :label="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="生日特权" prop="priviledgeBirthday">
                        <el-radio-group v-model="form.priviledgeBirthday">
                            <el-radio :label="1">有</el-radio>
                            <el-radio :label="0">无</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.note"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="clearPopForm">取 消</el-button>
    <el-button type="primary" @click="submitPopForm('form')">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                sex: '',
                level: '',
                status: '',
                currentPage: 1,
                total: 100,
                formInline: {id: ``, name: ``},
                pageSize: 5,
                dialogVisible: false,
                form: {
                    id: 0,
                    name: "",
                    growthPoint: 0,
                    defaultStatus: 0,
                    freeFreightPoint: 0.0,
                    priviledgeComment: 0,
                    priviledgePromotion: 0,
                    priviledgeMemberPrice: 0,
                    priviledgeBirthday: 0,
                    note: "",
                    ratio: 0.0
                },
                rules: {
                    name: [{required: true, message: '等级名称不能为空', trigger: 'blur'}],
                    growthPoint: [{required: true, message: '成长值不能为空', trigger: 'blur'}],
                    ratio: [{required: true, message: '积分增减比不能为空', trigger: 'blur'}],
                    defaultStatus: [{required: true, message: '默认等级不能为空', trigger: 'blur'}],
                    freeFreightPoint: [{required: true, message: '免运费标准不能为空', trigger: 'blur'}],
                    priviledgePromotion: [{required: true, message: '专享活动特权不能为空', trigger: 'blur'}],
                    priviledgeMemberPrice: [{required: true, message: '价格特权不能为空', trigger: 'blur'}],
                    priviledgeBirthday: [{required: true, message: '生日特权不能为空', trigger: 'blur'}],
                    priviledgeComment: [{required: true, message: '评论特权不能为空', trigger: 'blur'}],

                }
            }
        },
        // 初始化数据  mounted()
        created: function () {
            this.loadData();
        },
        methods: {
            //封装数据请求
            loadData() {
                let _this = this;
                this.$http.post("/ms/memberLevel/queryAll?pageNo=" + this.currentPage + "&pageSize=" + this.pageSize + "", this.formInline)
                    .then((response) => {
                        let list = response.data.t.list;
                        _this.tableData = list
                        _this.total = response.data.t.total;
                    })
            },
            //处理编辑
            handleEdit(index, row) {
                this.clearPopForm();
                this.dialogVisible = true;
                console.log(row)
                if(row!==undefined){
                    this.form = JSON.parse(JSON.stringify(row))
                }
            },
            //处理删除
            handleDelete(index, row) {
                let id = row.id;
                this.$http.delete('/ms/memberLevel/deleteById?memberLevelId='+id+'').then((resp)=>{
                    if(Number(resp.data.resultCode===2000)){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.onSubmit();
                    }else {
                        this.$message({
                            message: '删除失败，请查看此等级下是否还存在活跃用户',
                            type: 'error'
                        })
                    }
                });
            },
            //分页 每页数量变化时处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },
            //分页 第几页变化时处理
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            //点击查询方法
            onSubmit() {
                this.currentPage = 1;
                this.loadData();
                this.formInline.id = ''
                this.formInline.name = ''
            },
            //提交表单
            submitPopForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        if (Number(this.form.id) !== 0) {
                            this.$http.put("/ms/memberLevel/update", this.form).then((resp) => {
                                if (Number(resp.data.resultCode) === 2000) {
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                    this.currentPage = 1;
                                    this.loadData();
                                }
                                if (Number(resp.data.resultCode) === 5000) {
                                    this.$message({
                                        message: '有重复角色名',
                                        type: 'error'
                                    })
                                }
                            })
                        } else {
                            this.$http.post("/ms/memberLevel/insert", this.form).then((resp) => {
                                if (Number(resp.data.resultCode) === 2000) {
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    })
                                    this.currentPage = 1;
                                    this.loadData();
                                    this.dialogVisible = false;
                                    this.form = {}
                                }
                                if (Number(resp.data.resultCode) === 5000) {
                                    this.$message({
                                        message: '添加失败，请检查是否有重复名称',
                                        type: 'error'
                                    })
                                }
                            })
                        }
                    }
                })
            },
            //清除弹出层表单
            clearPopForm() {
                this.form = {
                    id: 0,
                    name: "",
                    growthPoint: 0,
                    defaultStatus: 0,
                    freeFreightPoint: 0.0,
                    priviledgeComment: 0,
                    priviledgePromotion: 0,
                    priviledgeMemberPrice: 0,
                    priviledgeBirthday: 0,
                    note: "",
                    ratio: 0.0
                }
                this.dialogVisible = false;
            }

        }
    }
</script>

<style scoped>

</style>